<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="searchForm"
				:model="queryData"
				size="medium"
				inline
				@submit.native.prevent
			>
				<el-form-item :label="'游戏名称:'" prop="gameName">
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.gameName"
						clearable
						size="medium"
						:maxlength="12"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>

				<el-form-item
					:label="$t('game.show_status') + ':'"
					prop="status"
				>
					<el-select
						v-model="queryData.status"
						clearable
						:placeholder="$t('common.all')"
						style="width:200px"
						:popper-append-to-body="false"
					>
						<el-option key="all" :value="undefined">
							{{ $t('common.all') }}
						</el-option>
						<el-option
							v-for="item in statusList"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item :label="'支持终端:'" prop="supportTerminal">
					<el-select
						v-model="queryData.supportTerminal"
						style="width:200px"
						clearable
						:placeholder="$t('common.all')"
						:popper-append-to-body="false"
					>
						<el-option key="all" :value="undefined">
							{{ $t('common.all') }}
						</el-option>
						<el-option
							v-for="item in betDeviceType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item
					:label="$t('common.last_updateBy') + ':'"
					prop="updatedBy"
				>
					<el-input
						v-input="{ name: 'symbols' }"
						v-model="queryData.updatedBy"
						clearable
						size="medium"
						:maxlength="12"
						style="width: 200px"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
					></el-input>
				</el-form-item>
				<el-form-item style="margin-left: 0px">
					<div>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							:loading="loading"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							type="warning"
							icon="el-icon-plus"
							:disabled="loading"
							size="medium"
							@click="addFn"
						>
							{{ $t('common.add') }}
						</el-button>
					</div>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="tableData"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
			>
				<el-table-column
					prop="venueName"
					align="center"
					:label="'排序'"
				>
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column
					prop="venueGameCode"
					align="center"
					width="150px"
					:label="'游戏ID'"
				></el-table-column>
				<el-table-column
					prop="gameName"
					align="center"
					width="150px"
					:label="'游戏名称'"
				></el-table-column>
				<el-table-column
					prop="venueCode"
					align="center"
					width="150px"
					:label="'场馆名称'"
				>
					<template slot-scope="scope">
						{{ venueTypeCode(scope.row.venueCode) }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					width="150px"
					:label="'客户端显示状态'"
				>
					<template slot-scope="scope">
						<el-tag v-show="scope.row.status === 1" type="success">
							{{ $t('common.status_turn_on') }}
						</el-tag>
						<el-tag v-show="scope.row.status === 2" type="warning">
							{{ $t('common.status_maintain') }}
						</el-tag>
						<el-tag v-show="scope.row.status === 0" type="danger">
							{{ $t('common.status_disabled') }}
						</el-tag>
					</template>
				</el-table-column>
				<!-- <el-table-column
					prop="supportTerminals"
					align="center"
					width="150px"
					:label="'支持终端'"
				>
					<template slot-scope="scope">
						{{ supportTerminalsFn(scope.row.supportTerminals) }}
					</template>
				</el-table-column> -->
				<el-table-column
					prop="jackpot"
					align="center"
					width="150px"
					:label="'Jackpot奖池'"
				>
					<template slot-scope="scope">
						{{ scope.row.jackpot ? '有' : '无' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					width="150px"
					align="center"
					:label="'支持币种'"
				>
					<template slot-scope="scope">
						USTD
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					width="150px"
					:label="'图标状态'"
				>
					<template slot-scope="scope">
						{{
							scope.row.iconStatus
								? iconStatusVal[scope.row.iconStatus]
								: '无'
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="operation"
					align="center"
					width="150px"
					:label="'游戏图标'"
				>
					<template slot-scope="scope">
						<el-link
							type="primary"
							@click="
								venueIconUrlPc = scope.row.venueIconUrlPc
								iconUrl = scope.row.iconUrl
								venueIconVisible = true
								isTransferIcon = 1
							"
						>
							点击预览
						</el-link>
					</template>
				</el-table-column>
				<el-table-column
					prop="description"
					align="center"
					width="150px"
					:label="'游戏描述'"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.description || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="remark"
					width="150px"
					align="center"
					:label="'备注信息'"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.remark || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdBy"
					align="center"
					width="150px"
					:label="'创建人'"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="createdAt"
					align="center"
					width="220px"
					:label="'创建时间'"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.createdAt || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedBy"
					align="center"
					width="150px"
					:label="'最后操作人'"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedBy || '-' }}</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="updatedAt"
					align="center"
					width="220px"
					:label="'最后操作时间'"
				>
					<template slot-scope="scope">
						<span>{{ scope.row.updatedAt || '-' }}</span>
					</template>
				</el-table-column>

				<el-table-column
					prop="operation"
					align="center"
					:label="$t('common.actions')"
					width="240px"
				>
					<template slot-scope="scope">
						<span>
							<el-button
								v-if="
									hasPermission('90750080') &&
										scope.row.status
								"
								type="danger"
								@click="updateStatus(scope.row.gameId, 0)"
							>
								{{ $t('common.disabled') }}
							</el-button>
							<el-button
								v-if="
									hasPermission('90750080') &&
										!scope.row.status
								"
								type="success"
								@click="updateStatus(scope.row.gameId, 1)"
							>
								{{ $t('common.turn_on') }}
							</el-button>
						</span>
						<span>
							<el-button
								v-if="
									hasPermission('90750081') &&
										scope.row.status !== 2
								"
								type="warning"
								@click="
									rowData = scope.row
									submitStatus = 2
									updateStatus2(scope.row.gameId, 2)
								"
							>
								{{ $t('common.maintain') }}
							</el-button>
							<template v-else>
								<el-button
									v-if="hasPermission('90750081')"
									type="success"
									@click="updateStatus(scope.row.gameId, 1)"
								>
									{{ $t('common.turn_on') }}
								</el-button>
							</template>
						</span>

						<el-button
							v-if="hasPermission('90750082')"
							:disabled="scope.row.status === 1"
							type="primary"
							@click="edit(scope.row)"
						>
							{{ $t('common.edit') }}
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:total="total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<el-dialog
			v-if="addVisible"
			:title="addFormData.gameId ? $t('common.edit') : $t('common.add')"
			:visible.sync="addVisible"
			width="1000px"
		>
			<el-form
				ref="addForm"
				:model="addFormData"
				:label-position="'right'"
				label-width="150px"
				destroy-on-close
				@submit.native.prevent
			>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="'游戏名称:'"
							prop="gameName"
							:rules="[
								{
									required: true,
									message: $t('common.please_enter'),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.gameName"
								style="width:100%"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								maxlength="30"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="'Jackpot奖池:'"
							prop="jackpot"
							:rules="[
								{
									required: true,
									message: $t('common.please_choose'),
									trigger: ['blur', 'change']
								}
							]"
						>
							<el-select
								v-model="addFormData.jackpot"
								clearable
								style="width:100%"
								:placeholder="$t('common.please_choose')"
								:popper-append-to-body="false"
							>
								<el-option :label="'有'" :value="1"></el-option>
								<el-option :label="'无'" :value="0"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="'场馆名称:'"
							prop="venueCode"
							:rules="[
								{
									required: true,
									message: $t('common.please_choose'),
									trigger: ['blur', 'change']
								}
							]"
						>
							<el-select
								:disabled="addFormData.gameId"
								v-model="addFormData.venueCode"
								clearable
								:placeholder="$t('common.please_choose')"
								style="width: 100%"
								:popper-append-to-body="false"
							>
								<el-option
									v-for="item in bwVenueList"
									:key="item.code"
									:label="item[getKey('venueName')]"
									:value="item.venueCode"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							:label="'游戏ID:'"
							prop="venueGameCode"
							:rules="[
								{
									required: true,
									message: $t('common.please_enter'),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.venueGameCode"
								style="width:100%"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								maxlength="30"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="12">
						<el-form-item
							:label="'支持终端:'"
							prop="supportTerminalList"
							:rules="[
								{
									required: true,
									message: $t('common.please_choose'),
									trigger: ['blur', 'change']
								}
							]"
						>
							<el-select
								v-model="addFormData.supportTerminalList"
								style="width: 100%"
								multiple
								clearable
								collapse-tags
								:placeholder="$t('common.please_choose')"
								:popper-append-to-body="false"
							>
								<el-option
									v-for="item in betDeviceType"
									:key="item.code"
									:label="item.description"
									:value="item.code"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col> -->
					<el-col :span="12">
						<el-form-item
							:label="'支持币种:'"
							prop="supportCurrencyList"
							:rules="[
								{
									required: true,
									message: $t('common.please_choose'),
									trigger: ['blur', 'change']
								}
							]"
						>
							<el-select
								v-model="addFormData.supportCurrencyList"
								clearable
								multiple
								collapse-tags
								disabled
								style="width:100%"
								:placeholder="$t('common.please_choose')"
								:popper-append-to-body="false"
							>
								<el-option
									:label="'USTD'"
									:value="'USTD'"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="'接入参数:'" prop="accessInfo">
							<el-input
								v-model="addFormData.accessInfo"
								style="width:100%"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								maxlength="30"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item
							:label="'排序:'"
							prop="gameSort"
							:rules="[
								{
									required: true,
									message: $t('common.please_enter'),
									trigger: 'blur'
								}
							]"
						>
							<el-input
								v-model="addFormData.gameSort"
								style="width:100%"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								maxlength="30"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="'备注信息:'" prop="remark">
							<el-input
								v-model="addFormData.remark"
								style="width:100%"
								clearable
								show-word-limit
								size="medium"
								:placeholder="$t('common.please_enter')"
								maxlength="500"
								show-word-limit
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item :label="'图标状态:'" prop="zhName">
							<el-select
								v-model="addFormData.iconStatus"
								clearable
								style="width:100%"
								:placeholder="$t('common.please_choose')"
								:popper-append-to-body="false"
							>
								<el-option
									label="无"
									:value="undefined"
								></el-option>
								<el-option label="最新" :value="3"></el-option>
								<el-option label="热门" :value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item :label="'游戏描述:'" prop="zhName">
							<el-input
								v-model="addFormData.description"
								style="width:100%"
								clearable
								size="medium"
								:placeholder="$t('common.please_enter')"
								maxlength="500"
								show-word-limit
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<!-- <el-col :span="12">

					</el-col> -->
					<el-col :span="12">
						<el-form-item
							:rules="[
								{
									required: true,
									message: $t('common.please_choose'),
									trigger: ['blur', 'change']
								}
							]"
							:label="'客户端图标:'"
							prop="iconUrl"
						>
							<UploadItem
								ref="iconUrl"
								:uploadAPI="uploadAPI"
								:imgUrl="addFormData.iconUrl"
								:upload-file-type="'image'"
								:platform="'PC'"
								:bounds="{
									width: 216,
									height: 216
								}"
								:fileSize="fileSize"
								@upoladItemSucess="
									(file) =>
										handleUploadSucess(file, 'iconUrl')
								"
								@startUpoladItem="handleStartUpload"
								@deleteUpoladItem="
									(e) => handleDeleteUpload('iconUrl')
								"
								@upoladItemDefeat="
									(e) => handleUploadDefeat('iconUrl')
								"
							></UploadItem>
							<p style="color:red" class="tip">
								{{ $t('game.venue_manage.img_type') }}690*440{{
									$t('game.venue_manage.img_size')
								}}5M
							</p>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addVisible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="submit">
					{{ $t('common.confirm') }}
				</el-button>
			</span>
		</el-dialog>
		<el-dialog
			:visible.sync="remarksVisible"
			:before-close="
				() => {
					$refs.remarkForm.clearValidate()
					remarkForm.changeStatusRemark = ''
					remarksVisible = false
				}
			"
			width="600px"
			:title="$t('common.maintain')"
		>
			<el-form
				ref="remarkForm"
				:model="remarkForm"
				:label-position="'right'"
				destroy-on-close
			>
				<el-form-item
					:label="$t('common.remark')"
					prop="changeStatusRemark"
					:rules="[
						{
							required: true,
							message: $t('game.venue_manage.input')
						}
					]"
				>
					<el-input
						v-model="remarkForm.changeStatusRemark"
						:placeholder="$t('game.venue_manage.input')"
						type="textarea"
						:maxlength="500"
						show-word-limit
					/>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button
					@click="
						$refs.remarkForm.clearValidate()
						remarkForm.changeStatusRemark = ''
						remarksVisible = false
					"
				>
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="updateStatusRemarks">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<el-dialog
			:visible.sync="venueIconVisible"
			:width="isTransferIcon === 3 ? '330px' : '650px'"
		>
			<img
				v-if="iconUrl && iconUrl !== ''"
				class="imgStyle"
				:src="iconUrl"
				alt=""
			/>
			<div v-else class="noGamePic">暂无游戏图标</div>
		</el-dialog>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { getVenueListWithoutPage } from '@/api/game'
import UploadItem from '@/components/UploadItem'
import {
	venueGameConfigEdit,
	venueGameConfigAdd,
	venueGameConfigListPage,
	venueGameConfigSetStatus
} from '@/api/game'
import MainContent from '@/components/MainContent/index.vue'

export default {
	name: routerNames.venueManage,
	components: {
		UploadItem,
		MainContent
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			iconStatusVal: {
				1: '推荐',
				2: '热门',
				3: '最新'
			},
			otherDependenComponents: [],
			queryData: {
				venueName: '',
				updatedBy: '',
				status: undefined
			},
			isTransferIcon: false,
			rowData: {},
			tableData: [],
			addVisible: false,
			addFormData: {
				iconUrl: null,
				supportCurrencyList: ['USTD']
			},
			remarkForm: {
				changeStatusRemark: ''
			},
			loading: false,
			pageNum: 1,
			pageSize: 100,
			total: 0,
			venueIconVisible: false,
			venueIconUrlPc: '',
			bwVenueList: [],
			iconUrl: '',
			venueTransferIconUrlPc: '',
			venueTransferIconUrlApp: '',
			venueWalletIconUrl: '',
			remarksVisible: false,
			changeStatusRemark: '',
			submitStatus: null
		}
	},
	computed: {
		betDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		accountType() {
			return this.globalDics.accountType || []
		},
		// 显示状态
		statusList() {
			return [
				{
					code: '0',
					description: this.$t('common.status_disabled')
				},
				{
					code: '1',
					description: this.$t('common.status_turn_on')
				},
				{
					code: '2',
					description: this.$t('common.status_maintain')
				}
			]
		},

		// 图片上传接口
		uploadAPI() {
			return this.$api.imageUpload
		},
		fileSize() {
			return 5 * 1024 * 1024
		}
	},
	created() {
		this.loadData()
		// 场馆名称
		this.getBwVenueList()
	},
	methods: {
		// 获取场馆列表
		getBwVenueList() {
			getVenueListWithoutPage().then((res) => {
				if (res.data && res.data.length > 0) {
					this.bwVenueList = res.data
				}
			})
		},
		supportTerminalsFn(val) {
			const terminalArray = val.split(',')

			// 遍历数组，并使用映射对象获取对应的字符串
			const resultArray = terminalArray.map(
				(terminal) =>
					this.betDeviceType.find((ele) => ele.code === terminal)[
						'description'
					]
			)


			// 将结果数组转换为用逗号分隔的字符串
			const resultString = resultArray.join(', ')
			return resultString
		},
		venueTypeCode(val) {
			const findVal = this.bwVenueList.find(
				(ele) => ele.venueCode === val
			)
			return findVal ? findVal.venueName : '-'
		},
		reset() {
			this.$refs.searchForm.resetFields()
			this.queryData = {}
			this.pageNum = 1
			this.loadData()
		},
		// 列表数据获取
		loadData() {
			this.loading = true
			const params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.queryData
			}
			if (params.status) {
				params.status = [params.status]
			}
			if (params.supportTerminal) {
				params.supportTerminal = [params.supportTerminal]
			}
			for (const k in params) {
				if (params[k] === '' || params[k] === undefined) {
					delete params[k]
				}
			}
			venueGameConfigListPage(params).then((res) => {
				this.loading = false
				this.tableData = res.data.record
				this.total = res.data.totalRecord
			})
		},
		// 修改状态 启用/禁用
		updateStatus(gameId, status) {
			const text =
				status === 0
					? this.$t('common.disabled')
					: status === 1
					? this.$t('common.turn_on')
					: this.$t('common.maintain')
			this.$confirm(
				`<strong>${this.$t('game.venue_manage.is')}${text}${this.$t(
					'common.actions'
				)}</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>${this.$t(
						'operation.switch_status_tips2'
					)}</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					venueGameConfigSetStatus({ gameId, status }).then((res) => {
						if (res?.code === 200) {
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg || this.$t('common.error'),
								type: 'error'
							})
						}
						this.loadData()
					})
				})
				.catch(() => {})
		},
		updateStatus2(gameId, status) {
			this.$confirm(
				`<strong>是否对该场馆进行维护操作</strong></br>
                 <span style='font-size:12px;color:#c1c1c1'>一旦操作将会立即生效</span>`,
				this.$t('common.success_tip'),
				{
					dangerouslyUseHTMLString: true,
					confirmButtonText: this.$t('common.confirm'),
					cancelButtonText: this.$t('common.cancel'),
					type: 'warning'
				}
			)
				.then(() => {
					venueGameConfigSetStatus({ gameId, status }).then((res) => {
						if (res?.code === 200) {
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg || this.$t('common.error'),
								type: 'error'
							})
						}
						this.loadData()
					})
				})
				.catch(() => {})
		},
		// 修改状态 维护/启用/禁用
		updateStatusRemarks() {
			this.$refs.remarkForm.validate((valid) => {
				if (valid) {
					venueGameConfigSetStatus({
						gameId: this.rowData.gameId,
						status: this.submitStatus,
						changeStatusRemark: this.remarkForm.changeStatusRemark
					}).then((res) => {
						if (res?.code === 200) {
							this.remarksVisible = false
							this.remarkForm.changeStatusRemark = ''
							this.$message({
								message: this.$t('common.action_success'),
								type: 'success'
							})
						} else {
							this.$message({
								message: res?.msg || this.$t('common.error'),
								type: 'error'
							})
						}
						this.loadData()
					})
				}
			})
		},
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					const params = { ...this.addFormData }
					// for (const k in params) {
					// 	if (
					// 		params[k] === '' ||
					// 		params[k] === undefined ||
					// 		(Object.prototype.toString.call(params[k]) ===
					// 			'[object Array]' &&
					// 			!params[k].length)
					// 	) {
					// 		delete params[k]
					// 	}
					// }
					const interfaceName = params.gameId
						? venueGameConfigEdit
						: venueGameConfigAdd
					interfaceName({
						...params,
						supportTerminalList: [1, 2, 5],
						gameId: this.rowData.gameId
					}).then((res) => {
						if (res.code !== 200) {
							return this.$message.error(res.msg)
						}
						this.loadData()
						this.$message.success(this.$t('common.action_success'))
						this.addVisible = false
					})
				}
			})
		},
		// 编辑
		edit(row) {
			this.addVisible = true
			this.rowData = row
			this.addFormData = Object.assign({}, row)
			if (!this.addFormData.iconStatus) {
				this.addFormData.iconStatus = undefined
			}
			this.addFormData.supportCurrencyList = ['USTD']
			this.addFormData.supportTerminalList = this.addFormData.supportTerminals.split(
				','
			) || [1, 2, 5]
			this.$nextTick(() => {
				this.$refs.iconUrl.fileUrl = row.iconUrl || ''
			})
		},
		addFn() {
			this.addVisible = true
			this.rowData = {}
			this.addFormData = {
				iconUrl: null,
				supportCurrencyList: ['USTD']
			}
			this.$nextTick(() => {
				this.$refs.addForm.clearValidate()
			})
		},
		// 分页
		handleSizeChange(value) {
			this.pageNum = 1
			this.pageSize = value
			this.loadData()
		},
		// 分页
		handleCurrentChange(value) {
			this.pageNum = value
			this.loadData()
		},
		handleClose() {},
		handleStartUpload() {
			this.$message.info(this.$t('common.upload_start'))
		},
		handleUploadSucess({ index, file, id }, key) {
			this.$set(this.addFormData, key, file.imgUrl)
		},
		handleUploadDefeat(key) {
			this.addFormData[key] = ''
			this.$message.error(this.$t('common.upload_fail'))
		},
		handleDeleteUpload(key) {
			this.addFormData[key] = ''
			this.$message.warning(this.$t('common.upload_del'))
		}
	}
}
</script>

<style lang="scss" scoped>
.imgView {
	display: flex;
	justify-content: space-between;
	margin: 0 15px;
	li {
		display: flex;
		flex-direction: column;
		margin-bottom: 15px;
		span {
			width: 200px;
			font-size: 20px;
			font-weight: 500;
			margin-bottom: 10px;
		}
		img {
			display: block;
			width: 200px;
		}
	}
}
.imgStyle {
	margin: 0 auto;
	display: block;
	width: 100%;
	height: auto;
}
.noGamePic {
	text-align: center;
	padding: 20px 0 50px;
	font-size: 18px;
}
.vi_VN,
.en_US,
.th_TH {
	.imgView {
		white-space: nowrap;
		li {
			span {
				width: 350px;
			}
		}
	}
	.tip {
		width: 105%;
	}
}
</style>
